<template>
<h2>{{ state }}</h2>
<button @click="change">更新数据</button>
</template>

<script lang="ts" setup>
import { reactive, readonly, shallowReadonly } from 'vue';


    const state = reactive({
        name:"孙悟空",
        car: {
            name:"汗血宝马"
        }
    })

    let state1 = readonly (state)
    let state2 = shallowReadonly(state)

    function change(){
        // readonly 深层只读
        // state1.name = "猪八戒"
        state2.name = "猪八戒"
    }
</script>